<template>
  <div class="box">
    <!-- 复选框 -->
    <div class="nav">
      <div v-for="(item, index) in list" :key="index">
        <input type="checkbox" v-model="checked" :value="index" />
        <span> 第{{ index + 1 }}组</span>
      </div>
      <button @click="ok">{{ state ? "随机点名" : "暂停点名" }}</button>
    </div>
    <div class="con">
      <!-- 每一组学员 -->
      <div
        v-for="(item, index) in list"
        :key="index"
        :class="{ border: index === checked[index] }"
      >
        <h3>第{{ index + 1 }}组</h3>
        <h3
          v-for="(item1, index1) in item"
          :key="index1"
          :class="{ active: index1 == current[index] }"
        >
          {{ item1 }}
        </h3>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      list: [
        ["霍康", "马全旺", "许少伟", "郭民龙"],
        ["李凤雪", "张晶晶", "柴时凯", "高泽彬"],
        ["马苏培", "王文雨", "杜世纪", "冯俊豪"],
        ["祝思", "许彪", "武旭震", "王志豪"],
        ["李海甲", "吴守佳", "王俊凯", "韩冰"],
        ["杨闯杰", "李朝东", "王世成", "丁严迪"],
        ["李兵兵", "李昂", "何新礼", "王硕"],
        ["王岩", "张豪杰", "张恒瑞", "张维鹏"],
      ],
      //   保存选中的复选框的下标
      checked: [],
      //   保存随机数
      current: [],
      //   按钮的状态
      state: true,
      //   为了清除定时器
      si: null,
    };
  },
  mounted() {},
  methods: {
    //   随机点名按钮
    ok() {
      this.state = !this.state;
      if (this.si == null) {
        this.si = setInterval(() => {
          this.checked.forEach((item) => {
            this.$set(this.current, item, this.getRandom(0, 3));
          });
        }, 10);
      } else {
        clearInterval(this.si);
        this.si = null;
      }
    },
    getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  margin-left: 400px;
}
.nav {
  width: 800px;
  height: 80px;
  background: aquamarine;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.con {
  width: 800px;
  height: 600px;
  background: aquamarine;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.con div {
  width: 180px;
  height: 270px;
  background: pink;
  border-radius: 5px;
}
h3 {
  width: 100%;
  height: 35px;
  margin-top: 10px;
  line-height: 35px;
}
.active {
  background: rgb(255, 0, 149);
  color: #fff;
}
.border {
  border: 2px solid red;
  border-radius: 5px;
}
</style>